<template>
    <div>
        <div v-if="isTable&&!isSmall&&props_total!=0">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            style="text-align: right;margin:10px 0;"
            :current-page="props_pageNo"
            :page-size="pageSize"
            :page-sizes="pageSizeOpt"
            :total="props_total"
            :layout="layout">
            </el-pagination>
        </div>
        <div v-if="isTable&&isSmall&&props_total!=0" class="paginaDIv">
            <div type="button" class="btn-next" @click="firstLastClick('first')"><i class="el-icon el-icon-back"></i></div>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            style="text-align: right;margin:10px 0;"
            :current-page.sync="smallPage"
            :page-size="pageSize"
            :total="props_total"
            layout="prev,slot,next">
            <template>
              <span class="pagi">
                <span class="el-pagination__jump" style="margin-left:0px;"
                    ><div class="el-input el-pagination__editor is-in-pagination">
                        <input
                        type="number"
                        v-model="smallPageNum"
                        autocomplete="off"
                        class="el-input__inner"
                        @change="jumpChange"
                        />
                    </div></span>
                </span>
            </template>
            </el-pagination>
            <div type="button" class="btn-next" @click="firstLastClick('last')"><i class="el-icon el-icon-right"></i></div>
        </div>
    </div>
</template>
<script>
export default {
    name:"pagingModule",
    props:{
        pageSizeOpt:{
            type: Array,
            default() {
                return [10, 20, 30, 50, 100];
            }
        },
        pageSize: {
            type: Number,
            default: 10,
        },
        props_pageNo:{
            type:Number
        },
        isTable:{
            type:Boolean
        },
        props_total:{
            type:Number
        },
        isSmall:{
            type:Boolean
        },
        param:{
            type: Object,
            default:{},
        }
    },
    data(){
        return {
            layout:"total, sizes, prev, pager, next, jumper",
            layoutSmall:"prev,slot,next",
            smallPage:this.props_pageNo,
            smallPageNum:this.props_pageNo

        }
    },
    computed: {
        limit(){
            return this.pageSize;
        }
    },
    methods:{
        firstLastClick(type){
            if(type=="last"){
                if(this.smallPage!=Math.ceil(this.props_total/this.pageSize)){
                    this.smallPage=Math.ceil(this.props_total/this.pageSize);
                    if(this.smallPage<=0){
                        this.smallPage=1;
                    }
                    this.handleCurrentChange(this.smallPage);
                }
            }else{
                if(this.smallPage!=1){
                    this.smallPage=1;
                    this.handleCurrentChange(this.smallPage);
                }
            }
            this.smallPageNum=this.smallPage;
        },
        jumpChange(){
            if(this.smallPageNum*this.pageSize>this.props_total){
                this.smallPageNum=Math.ceil(this.props_total/this.pageSize);
                if(this.smallPageNum<=0){
                    this.smallPageNum=1;
                }
            }
            if(this.smallPageNum!=this.smallPage){
                this.smallPage=Number(this.smallPageNum);
                this.handleCurrentChange(this.smallPage);
            }
        },
        handleSizeChange(size){
            this.$emit('pageBefore',{page: this.smallPage, pageSize: size ,pageType:"size"});
        },
        handleCurrentChange(page){
            this.smallPage=page;
            this.smallPageNum=this.smallPage;
            this.$emit('pageBefore',{page: page, pageSide: this.limit,pageType:"page"},"fromPage");
        },
    }
}
</script>
<style scoped>
 .btn-next{
    margin: 0 5px;
    background-color: #f4f4f5;
    color: #606266;
    min-width: 30px;
    border-radius: 2px;
    height: 28px;
    line-height:28px;
    border: none;
    background-size: 16px;
    cursor: pointer;
    margin:12px 0px;
 }
 .btn-next i{
     display: block;
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
 }
 .btn-next:disabled{
    color: #C0C4CC;
    margin: 0 5px;
    background-color: #f4f4f5;
    min-width: 30px;
    border-radius: 2px;
    cursor: not-allowed;
 }
 .paginaDIv{
     display: flex;
     justify-content:flex-end;
 }
</style>
